<template>
  <div class="bar-chart-container">
    <div ref="barChart" style="width: 100%; height:100%;"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';

  export default {
    name: 'BarChart',
    data() {
      return {
        chartData: {
          xAxisData: [], // 横轴数据
          yAxisData: [], // 纵轴数据
          turnoverRateData: [] // 周转率数据
        },
      };
    },
    mounted() {
      this.chartData.xAxisData = this.turnChartNum.map(item => item.SkuInfo);
      this.chartData.yAxisData = this.turnChartNum.map(item => item.sku_num);
      this.chartData.turnoverRateData = this.turnChartNum.map(item => item.TurnoverRate); // 假设数据包含 turnover_rate
      this.initChart();
    },
    watch: {
      turnChartNum(newData) {
        this.chartData.xAxisData = newData.map(item => item.SkuInfo);
        this.chartData.yAxisData = newData.map(item => item.DDay);
        this.chartData.turnoverRateData = newData.map(item => item.TurnoverRate); // 更新周转率数据
        this.initChart();
      }
    },
    props: ['turnChartNum'],
    methods: {
      initChart() {
        const myChart = echarts.init(this.$refs.barChart);

        const option = {
          title: {
            text: '商品前十统计',
            left: 'left',
            textStyle: {
              color: '#333',
              fontSize: 18
            }
          },
          grid: {
            left: '0',
            right: '3%',
            bottom: '3%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis', // 鼠标悬浮时显示所有数据项的提示
            formatter: function(params) {
              // 格式化提示框，显示柱状图和曲线图的数据
              let tooltip = '';
              params.forEach(item => {
                if (item.seriesType === 'bar') {
                  tooltip += `${item.name}</br>天数:${item.value}<br>`;
                } else if (item.seriesType === 'line') {
                  tooltip += `周转率: ${item.value}%<br>`;
                }
              });
              return tooltip;
            }
          },
          legend: {
            data: ['数量', '周转率'],  // 图例项
          },
          xAxis: {
            type: 'category',
            data: this.chartData.xAxisData,
            axisLine: {
              lineStyle: {
                color: '#ccc'
              }
            },
            axisLabel: {
              color: '#333',
              interval: 0, // 强制显示所有标签
              rotate: 20, // 旋转标签，避免重叠
              formatter: function(value) {
                if (value.length > 10) {
                  return value.slice(0, 10) + '\n' + value.slice(10);
                }
                return value;
              }
            },
            axisTick: {
              alignWithLabel: true
            }
          },
          yAxis: [
            {
              type: 'value',
              axisLine: {
                show: false
              },
              splitLine: {
                lineStyle: {
                  color: '#eee'
                }
              },
              axisLabel: {
                color: '#333'
              }
            },
            {
              type: 'value',
              axisLine: {
                show: false
              },
              splitLine: {
                lineStyle: {
                  color: '#eee'
                }
              },
              axisLabel: {
                color: '#333',
                formatter: '{value}%' // 设置为百分比显示
              }
            }
          ],
          series: [
            {
              name: '数量',
              type: 'bar',
              data: this.chartData.yAxisData,
              itemStyle: {
                color: '#409EFF' // 设置柱状图的颜色
              },
              emphasis: {
                focus: 'series' // 鼠标悬浮时高亮
              },
              barWidth: '30%', // 设置柱状图的宽度为 15%
              barCategoryGap: '50%' // 增加柱状图之间的间隔，给标签更多空间
            },
            {
              name: '周转率',
              type: 'line',
              yAxisIndex: 1, // 使用第二个 Y 轴
              data: this.chartData.turnoverRateData,
              itemStyle: {
                color: '#FF7F50' // 设置折线图的颜色
              },
              lineStyle: {
                width: 3 // 设置折线图的线宽
              },
              smooth: true // 设置折线图平滑
            }
          ]
        };

        // 设置图表的配置项和数据
        myChart.setOption(option);

        // 监听窗口变化，自动调整图表大小
        window.addEventListener('resize', () => {
          myChart.resize();
        });
      },
    },
  };
</script>

<style scoped>
  .bar-chart-container {
    width: 100%;
    height: 350px;
  }
</style>
